import React, {PureComponent} from 'react';
import { withRouter } from "../hoc";

class HomeSongs extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      songs: [
        { id: 1, name: '东风破' },
        { id: 2, name: '晴天' },
        { id: 3, name: '突然好想你'}
      ]
    }
  }

  navigateToDetail(id) {
    const { navigate } = this.props.router;
    navigate('/detail/' + id);
  }

  render() {
    const { songs } = this.state;
    return (
        <div>
          <h3>HomeSongs</h3>
          <ul>
            {
              songs.map(song =>
                      <li key={song.id} onClick={e => this.navigateToDetail(song.id)}>{song.name}</li>)
            }
          </ul>
        </div>
    );
  }
}

export default withRouter(HomeSongs);